@import 'styles/settings';
@import 'styles/ui.module';
@import 'styles/typography-extends';

.mainMenuContent {
  position: fixed;
  top: 0;
  right: 0;
  z-index: $bring-to-front;

  height: 100vh;
  width: 100vw;

  background-color: $brand-color-secondary;

  // z-index: $over-all;

  @media #{$tablet-portrait} {
    z-index: $bring-to-front;
    width: 690px;
  }

  .closeMenuButton {
    position: absolute;
    top: $site-gutter;
    right: $site-gutter;
    display: flex;
    align-items: center;

    .closeText {
      @extend %subtitle;

      color: $white;
      margin-right: 20px;
    }
  }

  .menuListContainer {
    height: 100%;
    padding: 100px 20px 60px 40px;

    @media #{$tablet-portrait} {
      padding: 150px 74px 60px 190px;
    }

    color: white;
    overflow: auto;

    .menuList,
    .menuActions,
    .socialLinks {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .menuList {
      margin-bottom: 70px;
    }

    .menuButton {
      color: $white;
      position: relative;
      padding: 0;

      &:hover {
        .menuItemImage {
          opacity: 1;
        }
      }
    }

    .menuItem {
      position: relative;

      @extend %display1;

      font-weight: $font-weight-light;
      margin: 0 0 30px 0;
    }

    .menuItemImage {
      position: absolute;
      // z-index: $under-back;
      top: -15px;
      opacity: 0;
      transition: opacity .2s;
    }

    .greyItem {
      color: $grey-text;
      text-transform: none;
      text-align: right;
      top: 0;
      right: 0;
      width: 100%;
    }

    .menuAction {
      @extend %subtitle;

      font-weight: $font-weight;
      padding-bottom: $site-gutter;
    }

    .aboutButton,
    .shareButton {
      @extend %subtitle;
      color: $white;
      padding: 0;
      margin: 0;
    }

    .socialLinks {
      display: flex;
    }

    .socialAction {
      display: flex;
      align-items: center;
    }

    .socialLink {
      width: 30px;
      height: 30px;
      // background-color: $white-opacity;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 12px;
      border-radius: 50%;
    }
  }
}
